import React, { useEffect, useRef, useState } from 'react'
import './muma.css'
import Tou from '../../../accets/images/toukui_nor.png'
import Tou_hov from '../../../accets/images/toukui_hov.png'

import Tingche from '../../../accets/images/tingche_nor.png'
import Tingche_hov from '../../../accets/images/tingche_hov.png'

import Tuxiang from '../../../accets/images/tuxiang_nor.png'
import Tuxiang_hov from '../../../accets/images/tuxiang_hov.png'

import Jiankong from '../../../accets/images/jiankong_nor.png'
import Jiankong_hov from '../../../accets/images/jiankong_hov.png'

import Fenxi from '../../../accets/images/fenxi_nor.png'
import Fenxi_hov from '../../../accets/images/fenxi_hov.png'

import Dingwei from '../../../accets/images/dingwei_nor.png'
import Dingwei_hov from '../../../accets/images/dingwei_hov.png'
function Muma() {
    let [data,Setdata]=useState([
        {
            id:1,
            img:Tingche,
            img_hov:Tingche_hov,
            name:'停车场',
            active:false
        },
        {
            id:2,
            img:Tou,
            img_hov:Tou_hov,
            name:'钢盔',
            active:false
        },
        {
            id:3,
            img:Tuxiang,
            img_hov:Tuxiang_hov,
            name:'图像',
            active:false
        },
        {
            id:4,
            img:Jiankong,
            img_hov:Jiankong_hov,
            name:'监控',
            active:false
        },
        {
            id:5,
            img:Fenxi,
            img_hov:Fenxi_hov,
            name:'分析',
            active:false
        },
        {
            id:6,
            img:Dingwei,
            img_hov:Dingwei_hov,
            name:'定位',
            active:false
        },
    ])
    let list3=useRef(null)
    useEffect(()=>{
        for(let i=0;i<list3.current.children.length;i++){
            list3.current.children[i].style['animation-delay']=`${- 5 - i * 3.3}s, -${i * 3.3}s,-${i * 3.3}s`
        }
    },[])
    const isblue=(id)=>{
        for(let k=0;k<list3.current.children.length;k++){
            list3.current.children[k].style['animation-play-state']='paused';
        }
        let arr=data.find(item=>item.id===id);
        arr.active=!arr.active;
        Setdata([...data])
    }
    const dong=(id)=>{
        for(let k=0;k<list3.current.children.length;k++){
            list3.current.children[k].style['animation-play-state']='running';
        }
        let arr=data.find(item=>item.id===id);
        arr.active=!arr.active;
        Setdata([...data])
    }
    const dian=(id)=>{
        let arr=data.find(item=>item.id===id);
        alert(arr.name)
    }
  return (
    <div className='muma1' ref={list3}>
      {
        data.map((item)=>{
            return (
                <div key={item.id} className='muma2' onMouseEnter={(e)=>isblue(item.id)} onMouseLeave={(e)=>dong(item.id)} onClick={(e)=>dian(item.id)}>
                    <img src={item.active?item.img_hov:item.img} alt=''></img>
                    <p>{item.name}</p>
                </div>
            )
        })
      }
    </div>
  )
}

export default Muma
